<title>我的购物车</title>

<link rel="stylesheet" type="text/css" href="/static/home/css/pages-cart.css"/>

<script type="text/javascript" src="/static/home/js/pages/index.js"></script>

<!--主内容-->
<div class="cart py-container">
    <!--All goods-->
    <div class="allgoods">
        <h4>全部商品<span>11</span></h4>
        <div class="cart-main">
            <div class="yui3-g cart-th">
                <div class="yui3-u-1-4"><input type="checkbox" name="" id="" value=""/> 全部</div>
                <div class="yui3-u-1-4">商品</div>
                <div class="yui3-u-1-8">单价（元）</div>
                <div class="yui3-u-1-8">数量</div>
                <div class="yui3-u-1-8">小计（元）</div>
                <div class="yui3-u-1-8">操作</div>
            </div>
            <div class="cart-item-list">
                <div class="cart-shop">
                    <input type="checkbox" name="" id="" value=""/>
                    <span class="shopname self">传智自营</span>
                </div>
                <div class="cart-body">
                    {foreach $list as $v}
                    <div class="cart-list">
                        <ul class="goods-list yui3-g" cart_id="{$v.id}" number="{$v.number}">
                            <li class="yui3-u-1-24">
                                <input type="checkbox" class="row_check" name="" id="" value=""
                                       {if($v.is_selected)}checked="checked" {/if}/>
                            </li>
                            <li class="yui3-u-6-24">
                                <div class="good-item">
                                    <div class="item-img"><img src="{$v.goods.goods_logo}"/></div>
                                    <div class="item-msg">{$v.goods.goods_name}</div>
                                </div>
                            </li>
                            <li class="yui3-u-5-24">
                                <div class="item-txt">{$v.goods.value_names}</div>
                            </li>
                            <li class="yui3-u-1-8"><span class="price">{$v.goods.goods_price}</span></li>
                            <li class="yui3-u-1-8">
                                <a href="javascript:void(0)" class="increment mins">-</a>
                                <input autocomplete="off" type="text" value="{$v.number}" minnum="1"
                                       class="itxt current_number"/>
                                <a href="javascript:void(0)" class="increment plus">+</a>
                            </li>
                            <li class="yui3-u-1-8"><span class="sum">{$v.goods.goods_price * $v.number}</span></li>
                            <li class="yui3-u-1-8">
                                <a href="javascript:;" class="delete">删除</a><br/>
                                <a href="#none">移到我的关注</a>
                            </li>
                        </ul>
                    </div>
                    {/foreach}
                </div>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
                <input type="checkbox" class="check_all" name="" value=""/>
                <span>全选</span>
            </div>
            <div class="option">
                <a href="#none">删除选中的商品</a>
                <a href="#none">移到我的关注</a>
                <a href="#none">清除下柜商品</a>
            </div>
            <div class="money-box">
                <div class="chosed">已选择<span id="total_number">0</span>件商品</div>
                <div class="sumprice">
                    <span><em>总价（不含运费） ：</em><i id="total_price" class="summoney">¥0</i></span>
                    <span><em>已节省：</em><i>-¥0</i></span>
                </div>
                <div class="sumbtn">
                    <a class="sum-btn" href="javascript:;" target="_blank">结算</a>
                </div>
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="deled">
            <span>已删除商品，您可以重新购买或加关注：</span>
            <div class="cart-list del">
                <ul class="goods-list yui3-g">
                    <li class="yui3-u-1-2">
                        <div class="good-item">
                            <div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
                        </div>
                    </li>
                    <li class="yui3-u-1-6"><span class="price">8848.00</span></li>
                    <li class="yui3-u-1-6">
                        <span class="number">1</span>
                    </li>
                    <li class="yui3-u-1-8">
                        <a href="#none">重新购买</a>
                        <a href="#none">移到我的关注</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="liked">
            <ul class="sui-nav nav-tabs">
                <li class="active">
                    <a href="#index" data-toggle="tab">猜你喜欢</a>
                </li>
                <li>
                    <a href="#profile" data-toggle="tab">特惠换购</a>
                </li>
            </ul>
            <div class="clearfix"></div>
            <div class="tab-content">
                <div id="index" class="tab-pane active">
                    <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                        <div class="carousel-inner">
                            <div class="active item">
                                <ul>
                                    <li>
                                        <img src="/static/home/img/like1.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like2.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like3.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like4.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="item">
                                <ul>
                                    <li>
                                        <img src="/static/home/img/like1.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like2.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like3.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="/static/home/img/like4.png"/>
                                        <div class="intro">
                                            <i>Apple苹果iPhone 6s (A1699)</i>
                                        </div>
                                        <div class="money">
                                            <span>$29.00</span>
                                        </div>
                                        <div class="incar">
                                            <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                    class="car"></i><span class="cartxt">加入购物车</span></a>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                        <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                    </div>
                </div>
                <div id="profile" class="tab-pane">
                    <p>特惠选购</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        //重新计算已选商品数量和金额
        var change_total = function () {
            //获取到选中行 row_check选中的
            var total_number = 0;
            var total_price = 0;
            $('.row_check:checked').each(function (i, v) {
                total_number += parseInt($(v).closest('ul').find('.current_number').val());
                total_price += parseFloat($(v).closest('ul').find('.sum').html());
            });
            //将累加的价格和数量放到页面中
            $('#total_number').html(total_number);
            $('#total_price').html('￥' + total_price);
        };

        /**
         * 修改购买数量
         * @param number 修改数量
         * @param element 触发事件的标签
         */
        var change_num = function (number, element) {
            //需要的参数  id  number
            var data = {
                "id": $(element).closest('ul').attr('cart_id'),
                "number": number
            };
            //发送ajax请求
            $.ajax({
                "url": "{:url('home/cart/changenum')}",
                "type": "post",
                "data": data,
                "dataType": "json",
                "success": function (res) {
                    if (res.code != 200) {
                        alert(res.msg);
                        return;
                    }
                    //将新的数量展示到页面
                    $(element).closest('ul').find('.current_number').val(number);
                    //将新的数量修改到当前行ul的number属性上，用于出错后恢复数据的
                    $(element).closest('ul').attr('number', number);
                    //重新计算小计金额
                    //取当前行的单价
                    var price = parseFloat($(element).closest('ul').find('.price').html());
                    //计算小计金额
                    var sum = price * number;
                    //将小计金额放到页面中
                    $(element).closest('ul').find('.sum').html(sum);
                    //重新计算已选商品数量和金额
                    change_total();
                }
            });
        };
        //全选效果
        $('.check_all').change(function () {
            //获取全选的选中状态  checked属性
            var status = $(this).prop('checked');
            //将每一行的checkbox状态 和全选设置成一样的
            $('.row_check').prop('checked', status);
            //重新计算已选商品数量和金额
            change_total();
            //修改选中状态到购物车数据中
            //参数  id  status
            var data = {
                "id": "all",
                "status": $(this).prop('checked') ? 1 : 0,
            };
            //发送ajax请求
            $.ajax({
                "url": "{:url('home/cart/changestatus')}",
                "type": "post",
                "data": data,
                "dataType": "json",
                "success": function (res) {
                    if (res.code != 200) {
                        alert(res.msg);
                        return;
                    }
                }
            });
        });

        //每一行checkbox选中
        $('.row_check').change(function () {
            //判断 全选是否应该选中
            check_all();
            //重新计算已选商品数量和金额
            change_total();
            //修改选中状态到购物车数据中
            //参数  id  status
            var data = {
                "id": $(this).closest('ul').attr('cart_id'),
                "status": $(this).prop('checked') ? 1 : 0,
            };
            //发送ajax请求
            $.ajax({
                "url": "{:url('home/cart/changestatus')}",
                "type": "post",
                "data": data,
                "dataType": "json",
                "success": function (res) {
                    if (res.code != 200) {
                        alert(res.msg);
                        return;
                    }
                }
            });
        });

        //页面刷新，直接判断 全选是否应该选中
        function check_all() {
            //判断 选中的行数  和 总行数 是否相等
            var status = $('.row_check:checked').length == $('.row_check').length;
            //设置全选的选中状态 checked属性
            $('.check_all').prop('checked', status);
        }

        check_all();
        //重新计算已选商品数量和金额
        change_total();

        //修改购买数量
        //+号
        $('.plus').click(function () {
            var number = parseInt($(this).closest('ul').find('.current_number').val());
            number += 1;

            //调用封装的函数
            change_num(number, this);
        });
        //-号
        $('.mins').click(function () {
            var number = parseInt($(this).closest('ul').find('.current_number').val());
            if (number == 1) return;
            number -= 1;
            //调用封装的函数
            change_num(number, this);
        });
        //input输入框直接修改
        $('.current_number').change(function () {
            var number = $(this).val();
            //检测输入的值 是否数字
            if (isNaN(number)) {
                //不是数字
                alert('购买数量必须是数字');
                var old_number = $(this).closest('ul').attr('number');
                $(this).val(old_number);
                return;
            }
            if (parseInt(number) != number || number <= 0) {
                //数量必须是正整数
                alert('购买数量必须是正整数');
                var old_number = $(this).closest('ul').attr('number');
                $(this).val(old_number);
                return;
            }
            //调用封装的函数
            change_num(number, this);
        });

        //删除
        $('.delete').click(function () {
            //获取id 删除条件参数
            var data = {
                "id": $(this).closest('ul').attr('cart_id')
            };
            var that = this;
            //发送ajax请求
            $.ajax({
                "url": "{:url('home/cart/delcart')}",
                "type": "post",
                "data": data,
                "dataType": "json",
                "success": function (res) {
                    if (res.code != 200) {
                        alert(res.msg);
                        return;
                    }
                    //将当前行从页面移除
                    //$(that).closest('ul').parent().remove();
                    $(that).closest('.cart-list').remove();
                    //重新计算已选商品数量和金额
                    change_total();
                }
            });
        });
        //结算
        $('.sum-btn').click(function () {
            console.log('nida')
            //判断是否有选中的购物记录
            if ($('.row_check:checked').length == 0) {
                alert('请选择要结算的商品');
                return;
            }
            //跳转到结算页
            location.href = "{:url('home/order/create')}";
        });
    });
</script>